<ion-header>
  <ion-toolbar class="orange-bar">
    <ion-buttons slot="start">
      <ion-button color="light" (click)="doPop()">
        <ion-icon name="ios-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>借款账单详情</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>标的名称</ion-label>
      <span slot="end">{{data['title']}}</span>
    </ion-item>
    <ion-item>
      <ion-label>期数</ion-label>
      <span slot="end">{{data['period']}}/{{totalPeriod}}</span>
    </ion-item>
    <ion-item>
      <ion-label>本息合计</ion-label>
      <ion-text slot="end" color="tertiary">
        {{(data['repaymentCorpus'] + data['repaymentInterest']) | number:'.2-2'}}元
      </ion-text>
    </ion-item>

    <ion-item>
      <ion-label>
        <dl class="amount-item">
          <dt>本金</dt>
          <dd>
            <ion-text color="tertiary">
              {{data['repaymentCorpus'] | number:'.2-2'}}元
            </ion-text>
          </dd>
        </dl>
        <dl class="amount-item">
          <dt>利息</dt>
          <dd>
            <ion-text color="tertiary">
              {{data['repaymentInterest'] | number:'.2-2'}}元
            </ion-text>
          </dd>
        </dl>
        <dl class="amount-item">
          <dt>违约金</dt>
          <dd>
            <ion-text color="tertiary">
              {{data['penalty'] || 0 | number:'.2-2'}}元
            </ion-text>
          </dd>
        </dl>
      </ion-label>
    </ion-item>

    <ion-item>
      <ion-label>实际还款</ion-label>
      <ion-text slot="end" color="tertiary">
        {{(data['repaymentCorpus'] + data['repaymentInterest'] + data['penalty']) | number:'.2-2'}}元
      </ion-text>
    </ion-item>
    <ion-item>
      <ion-label>到期时间</ion-label>
      <span slot="end">
        {{data['repaymentTime'] | date:'yyyy-MM-dd'}}
      </span>
    </ion-item>
    <ion-item>
      <ion-label>还款时间</ion-label>
      <span slot="end">
        {{!data['realRepaymentTime'] ? '---' : data['realRepaymentTime'] | date:'yyyy-MM-dd'}}
      </span>
    </ion-item>
    <ion-item>
      <ion-label>状态</ion-label>
      <ion-text slot="end" color="tertiary">
        {{data['status'] | i18nSelect:configService.loanStatus}}
      </ion-text>
    </ion-item>
  </ion-list>
  <div text-center *ngIf="data['isRepay']" (click)="presentAlertConfirm()">
    <a class="link-btn bg-orange">立即还款</a>
  </div>
</ion-content>
